<template>
    <view class="flight-inquiry">
        <view class="banner">
            <image src="@/static/images/banner1.png" mode=""></image>
        </view>
        <view class="content">
            <view class="tabs" :style="{
                backgroundImage: `url('${tabs[activeTab].url}')`,
                backgroundSize: '100% 100%',
            }">
                <view v-for="(tab, idx) in tabs" :key="tab.label" class="tabs-item"
                    :class="{ active: idx === activeTab }" @click="changeTab(idx)">
                    <text class="tab-label">{{ tab.label }}</text>
                    <image v-if="idx === activeTab" class="tab-active" src="@/static/images/active.png"
                        mode="widthFix" />
                </view>
            </view>
            <view class="tab-content">
                <view class="area">
                    <view class="city" :class="cityAClass">
                        {{ cityA }}
                    </view>
                    <image src="@/static/images/return.png" mode="" @click="swapCity"></image>
                    <view class="city" :class="cityBClass">
                        {{ cityB }}
                    </view>
                </view>
                <view class="time">出发时间</view>
                <view class="calendar" @click="openDepartCalendar">
                    <view class="date">
                        <view class="month">{{ departDateStr }}</view>
                        <view class="week">{{ departWeekStr }}</view>
                    </view>
                    <image src="@/static/images/calendar.png" mode=""></image>
                </view>
                <template v-if="activeTab == 1">
                    <view class="time">回程时间</view>
                    <view class="calendar" @click="openReturnCalendar">
                        <view class="date">
                            <view class="month">{{ returnDateStr }}</view>
                            <view class="week">{{ returnWeekStr }}</view>
                        </view>
                        <image src="@/static/images/calendar.png" mode=""></image>
                    </view>
                </template>

                <view class="tip">
                    <up-radio-group v-model="value" placement="row" shape="square" size="16" labelColor="#49596D">
                        <up-radio style="margin-right: 40rpx;" name="1" labelSize="13px" label="携带儿童2-12岁"></up-radio>
                        <up-radio name="2" labelSize="13px" label="携带婴儿14天-2岁"></up-radio>
                    </up-radio-group>
                </view>
                <view class="btn">
                    <up-button @click="onClick" type="primary" shape="circle" text="查询航班"></up-button>
                </view>
                <view class="searches">
                    <view class="top">
                        <view class="left">最近搜索</view>
                        <view class="right">
                            <image src="@/static/images/del.png" mode=""></image>
                            <view class="clear" @click="onClear">清空</view>
                        </view>
                    </view>
                    <view class="bot">
                        <view class="item" v-for="(item, i) in recentSearches" :key="i">{{ item.cityA }}-{{ item.cityB
                        }}
                            {{ item.time }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="footer-item">
                <image src="@/static/images/footer1.png" mode=""></image>
                <view class="name">
                    值机选座
                </view>
            </view>
            <view class="footer-item">
                <image src="@/static/images/footer2.png" mode=""></image>
                <view class="name">
                    航班动态
                </view>
            </view>
            <view class="footer-item">
                <image src="@/static/images/footer3.png" mode=""></image>
                <view class="name">
                    我的订单
                </view>
            </view>
        </view>
        <!-- 日历弹窗 -->
        <up-calendar :show="showDepartCalendar" @close="showDepartCalendar = false" @confirm="onDepartConfirm" />
        <up-calendar :show="showReturnCalendar" @close="showReturnCalendar = false" @confirm="onReturnConfirm" />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('1')
const tabs = [
    {
        label: '单程',
        url: new URL('@/static/images/active1.png', import.meta.url).href,
    },
    {
        label: '往返',
        url: new URL('@/static/images/active2.png', import.meta.url).href,

    },
    {
        label: '联程',
        url: new URL('@/static/images/active3.png', import.meta.url).href,

    }
]
const activeTab = ref(0)
const changeTab = (idx: number) => {
    activeTab.value = idx
}

const onClick = () => {
    uni.navigateTo({
        url: "/pages/flight-inquiry/flight-list",
    });
};

// 城市变量
const cityA = ref('北京')
const cityB = ref('哈尔滨')
const cityAClass = ref('')
const cityBClass = ref('')
const isSwapping = ref(false)

// 交换城市方法
const swapCity = () => {
    if (isSwapping.value) return
    isSwapping.value = true
    // 先交融到中间
    cityAClass.value = 'merge-to-center left'
    cityBClass.value = 'merge-to-center right'
    setTimeout(() => {
        // 互换内容
        const temp = cityA.value
        cityA.value = cityB.value
        cityB.value = temp
        // 从中间分开
        cityAClass.value = 'split-from-center-left'
        cityBClass.value = 'split-from-center-right'
        setTimeout(() => {
            cityAClass.value = ''
            cityBClass.value = ''
            isSwapping.value = false
        }, 350)
    }, 350)
}

// 最近搜索
const recentSearches = ref([
    {
        cityA: '北京',
        cityB: '拉萨',
        time: '11月15日'
    },
    {
        cityA: '北京',
        cityB: '哈尔滨',
        time: '11月15日'
    },
    {
        cityA: '北京',
        cityB: '哈尔滨',
        time: '11月15日'
    }
])
const onClear = () => {
    recentSearches.value = []
}
// 日期格式化工具
const formatDate = (dateStr: string) => {
    const date = new Date(dateStr)
    const month = date.getMonth() + 1
    const day = date.getDate()
    const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    const week = weekArr[date.getDay()]
    return {
        dateStr: `${month}月${day}日`,
        weekStr: week
    }
}

// 日历弹窗控制
const showDepartCalendar = ref(false)
const showReturnCalendar = ref(false)

// 默认日期
const departDate = ref(new Date())
const returnDate = ref(new Date())

const departDateStr = ref('')
const departWeekStr = ref('')
const returnDateStr = ref('')
const returnWeekStr = ref('')

// 初始化日期显示
const initDate = () => {
    const depart = formatDate(departDate.value as any)
    departDateStr.value = depart.dateStr
    departWeekStr.value = depart.weekStr
    const ret = formatDate(returnDate.value as any)
    returnDateStr.value = ret.dateStr
    returnWeekStr.value = ret.weekStr
}
initDate()

// 打开日历
const openDepartCalendar = () => {
    showDepartCalendar.value = true
}
const openReturnCalendar = () => {
    showReturnCalendar.value = true
}

// 日历选择回调
const onDepartConfirm = (e: any) => {
    showDepartCalendar.value = false
    if (e && e[0]) {
        departDate.value = e[0]
        const d = formatDate(e[0])
        departDateStr.value = d.dateStr
        departWeekStr.value = d.weekStr
    }
}

const onReturnConfirm = (e: any) => {
    showReturnCalendar.value = false
    if (e && e[0]) {
        returnDate.value = e[0]
        const d = formatDate(e[0])
        returnDateStr.value = d.dateStr
        returnWeekStr.value = d.weekStr
    }
}

</script>

<style scoped lang="scss">
.flight-inquiry {
    height: 100vh;
    background: #F6F8F5;
    padding-bottom: 160rpx;

    .banner {
        image {
            width: 100%;
        }
    }

    .content {
        position: relative;
        top: -120px;
        border-radius: 32rpx;
        margin: 26rpx;


        .tabs {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            background: url('@/static/images/active1.png');
            background-size: 100% 100%;
            height: 120rpx;
            min-height: 120rpx;

            .tabs-item {
                position: relative;
                flex: 1;
                text-align: center;
                padding: 24rpx 0 40rpx 0;
                font-size: 32rpx;
                color: #333;
                cursor: pointer;
                transition: color 0.3s;

                .tab-label {
                    position: relative;
                    z-index: 2;
                }

                .tab-bg {
                    position: absolute;
                    left: 50%;
                    top: 0;
                    transform: translateX(-50%);
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                    pointer-events: none;
                }

                .tab-active {
                    display: block;
                    margin: 0 auto;
                    margin-top: 8rpx;
                    width: 40rpx;
                    height: 8rpx;
                    z-index: 3;
                }
            }

            .tabs-item.active {
                color: #1A73E8;
                font-weight: bold;
            }
        }

        .tab-content {
            padding: 30rpx;
            background: #fff;
            position: relative;
            top: -1px;
            border-radius: 0 0 32rpx 32rpx;

            .area {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #F7F9F7;
                padding: 20rpx 10rpx;
                margin-bottom: 40rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;

                image {
                    width: 50rpx;
                    height: 50rpx;
                }

                .city {
                    width: 40%;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-family: PingFang-SC, PingFang-SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #101D34;
                    will-change: transform, opacity;

                }

                .city.merge-to-center.left {
                    animation: mergeLeft 0.35s forwards;
                }

                .city.merge-to-center.right {
                    animation: mergeRight 0.35s forwards;
                }

                .city.split-from-center-left {
                    animation: splitLeft 0.35s forwards;
                }

                .city.split-from-center-right {
                    animation: splitRight 0.35s forwards;
                }

                @keyframes mergeLeft {
                    from {
                        transform: none;
                        opacity: 1;
                    }

                    to {
                        transform: scale(0.8) translateX(30%);
                        opacity: 0;
                    }
                }

                @keyframes mergeRight {
                    from {
                        transform: none;
                        opacity: 1;
                    }

                    to {
                        transform: scale(0.8) translateX(-30%);
                        opacity: 0;
                    }
                }

                @keyframes splitLeft {
                    from {
                        transform: scale(0.8) translateX(30%);
                        opacity: 0;
                    }

                    to {
                        transform: none;
                        opacity: 1;
                    }
                }

                @keyframes splitRight {
                    from {
                        transform: scale(0.8) translateX(-30%);
                        opacity: 0;
                    }

                    to {
                        transform: none;
                        opacity: 1;
                    }
                }
            }

            .time {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #49596D;
                margin-bottom: 10rpx;
            }

            .calendar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #F7F9F7;
                padding: 20rpx 50rpx;
                margin-bottom: 20rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;

                image {
                    width: 50rpx;
                    height: 50rpx;
                }

                .date {
                    display: flex;
                    align-items: center;

                    .month {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #101D34;
                    }

                    .week {
                        margin-left: 20rpx;
                        font-size: 24rpx;
                        color: #49596D;
                    }
                }
            }

            .tip {
                span {

                    font-size: 26rpx;
                    color: #49596D;
                }
            }

            .btn {
                margin: 40rpx 0;

                .u-button {
                    box-shadow: 0px 2px 10px 4px rgba(28, 113, 244, 0.5);

                    .u-button__text {
                        font-size: 16px !important;
                        font-weight: bold;
                        letter-spacing: 5px;
                    }
                }
            }

            .searches {
                .top {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20rpx;

                    .left {
                        font-family: PingFang-SC, PingFang-SC;
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #49596D;
                        margin-bottom: 10rpx;
                    }

                    .right {
                        display: flex;
                        align-items: center;

                        image {
                            width: 36rpx;
                            height: 36rpx;
                        }

                        .clear {
                            margin-left: 10rpx;
                            font-size: 28rpx;
                            color: #808080;
                        }
                    }
                }

                .bot {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .item {
                        width: 48%;
                        color: #49596D;
                        padding: 20rpx;
                        background: #F7F7F9;
                        font-size: 14px;
                        border-radius: 4rpx 4rpx 4rpx 4rpx;
                        box-sizing: border-box;
                        margin-bottom: 10rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .item:nth-child(odd) {
                        margin-right: 10rpx;
                    }
                }
            }

        }
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 50rpx 20rpx;
        box-sizing: border-box;
        box-shadow: 14rpx 0rpx 34rpx 0rpx #ccc;

        .footer-item {
            display: flex;
            align-items: center;

            image {
                width: 50rpx;
                height: 50rpx;
                margin-right: 10rpx;
            }
        }
    }
}
</style>